<template>
	<template v-for="item in modelValue">
		<el-sub-menu :index="item.path" :key="item.path" v-if="item.children && item.children.length > 0">
			<template #title>
				<el-icon>
					<component :is="item.meta.icon"></component>
				</el-icon>
				<span>{{ item.meta.title }}</span>
			</template>
			<SubMenu :modelValue="item.children" />
		</el-sub-menu>
		<!--  -->
		<el-menu-item :index="item.path" v-else>
			<el-icon>
				<component :is="item.meta.icon"> </component>
			</el-icon>
			<template #title>
				<span>{{ item.meta.title }}</span>
			</template>
		</el-menu-item>
	</template>
</template>

<script setup lang="ts" name="subMenu">
defineProps<{
	modelValue: any
}>()
</script>

<style scoped></style>
